<template>
    <div class="top-card">
                <el-card shadow="hover">
                    <div class="title">订单同比增长</div>
                    <v-chart :option="option" style="width: 100%; height: 213px" ></v-chart>
                </el-card>
            </div>
</template>

<script setup>
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
import { getReportData } from '@/api/index.js'
const option = ref({})

const renderChart = (data) => {
  option.value = {
    series: {
      type: 'liquidFill',
      data: [data],
      color: ['red'],
      radius: '80%', // 水球的半径
      outline: {
        borderDistance: 2, // 轮廓的距离(padding)
        itemStyle: {
          borderWidth: 2, // 轮廓的宽度(border)
        },
      }, // 连线的轮廓
      amplitude: '10%', // 波浪的高度(振幅)
    },
  }
}
onMounted(async () => {
  const res = await getReportData()

  const data = (res.salesGrowLastDay / 100).toFixed(2)
  renderChart(data)
})
</script>

<style scoped>
.title{
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
</style>